<template>
	<view>


		<view class="nav">
			<view class="nav-bg">
			</view>
			<view class="nav-section">
				<view>
					<image class="little-pic" style="width: 38rpx;height: 38rpx;" src="/static/images/logo.png" mode="">
					</image>
					<text>553555人已开通会员</text>
				</view>
				<text>购买查询</text>
			</view>
			<view class="card">
				<view class="card-item">
					<image src="/static/images/zu428.png" mode=""></image>
					<view>
						<view class="tops">
							<text v-if="!Isvip">立即开通</text>
							<text v-elsr>立即续费</text>
							<view>会员</view>
						</view>
						<view v-if="!Isvip">开通会员尊享VIP权益</view>
						<view v-else>续费会员继续尊享VIP权益</view>
					</view>
				</view>
			</view>
		</view>
		<text class="tuijian">推荐</text>
		<view class="three">
			<view :class="currentIndex==index?'active':''" @tap="currentIndex=index" v-for="(item,index) in taoData" :key="item._id">
				<text>{{item.mouth}}个月</text>
				<text>￥{{item.salePrice}}</text>
				<text>￥{{item.normalPrice}}</text>
			</view>
		</view>
		<view class="calls" v-if="!Isvip">
			<text class="tuijian2">恭喜</text>
			您获得2折开通会员特权！
		</view><view class="calls" v-else>
			<text class="tuijian2">恭喜</text>
			您获得2折续费会员特权！
		</view>
		<button type="default" class="btn" @tap="show=true" v-if="!Isvip">立即开通</button>
		<button type="default" class="btn" @tap="show=true" v-else>立即续费</button>
	
		<view class="big">
			<view class="lit">
				<text>VIP特权</text>
				<view class="ones">
					<image src="/static/images/caipu.png" mode=""></image>
					<view>
						<text>1000+精品名厨菜谱</text>
						<text>大咖教学，轻松学会</text>
					</view>
				</view><view class="ones">
					<image src="/static/images/new.png" mode=""></image>
					<view>
						<text>每周上新</text>
						<text>新菜持续更新中</text>
					</view>
				</view>
				<view class="ones">
					<image src="/static/images/ad.png" mode=""></image>
					<view>
						<text>会员免广告打扰</text>
						<text>体验更流畅</text>
					</view>
				</view><view class="ones">
					<image src="/static/images/biaoshi.png" mode=""></image>
					<view>
						<text>VIP尊贵身份标识</text>
						<text>随时随地、与众不同</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
				<view class="titles">会员使用说明</view>
				<text>1.会员服务一经开通，不支持退款；</text>
				<text>2.如遇到苹果手机支付问题，建议参考Appstore支付流程；</text>
				<text>3.若会员开通出现异常，请立即联系客服，我们会在2个工作日内出处理结果。</text>
				<text>4.会员常见问题、会员服务协议、会员隐私协议。</text>
		</view>
		<view class="motaiBaBa" v-if="show">
			<view class="motai" >
				<view class="firstone">
					<text class="closeme" @tap="show=false">X</text>
					<text v-if="!Isvip">开通会员</text>
					<text v-else>续费会员</text>
				</view>
				<view class="three">
						<text class="tuijian-two">即将涨价</text>
					<view :class="currentIndexTwo==index?'active':''" @tap="currentIndexTwo=index" v-for="(item,index) in taoData" :key="item._id">
						<text>{{item.mouth}}个月</text>
						<text>￥{{item.salePrice}}</text>
						<text>￥{{item.normalPrice}}</text>
					</view>
				</view>
				<view class="calls">
					<text class="tuijian2">恭喜</text>
					<text class="ok">开通后立即全站去广告、免费看10000+名厨视频</text> 
				</view>
				<button type="default" class="buy" @tap="buyIt">立即购买</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				taoData: [],
				currentIndex:0,
				currentIndexTwo:0

			}
		},
		computed: {
			token() {
				return wx.getStorageSync("user_token")
			},
			Isvip(){
					return getApp().globalData.userInfo.vip
			}
		},
		onLoad() {
			this.getTao()
		},
		methods: {
			async getTao() {
				const {data} = await this.$api.openVip.getTao({
					token: this.token
				})
				this.taoData = data
				console.log(this.taoData);
			},
			async buyIt(){
				
					const _id=getApp().globalData.userInfo._id
					const month= this.taoData[this.currentIndexTwo].mouth
					const price= this.taoData[this.currentIndexTwo].salePrice
					//开通会员
				 const data=await this.$api.openVip.getOpenVip({_id:_id,date:month},{token:this.token})
				 //刷新用户数据
				 const token = wx.getStorageSync("user_token")
				 const datas = await this.$api.mine.getUserInfo({
				 	token: token
				 })
					console.log(datas);
				 if (datas[0]._id) {
				 	getApp().globalData.userInfo = datas[0]
				 console.log("更新后的用户数据", getApp().globalData.userInfo);
				 }
				 //开通成功通知
					uni.showToast({
					    title: data.msg,
					    duration: 2000,
						success() {
							setTimeout(()=>{
								uni.navigateTo({
									url:"../PayOk/PayOk?cast="+price
								})
							
							},2000)
							
						}
					});
				
			}
		}
	}
</script>

<style scoped lang="scss" src="./openvip.scss">

</style>
